<template>
  <div class="panel" v-html="tableContent"></div>
</template>
 
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
const { proxy }: any = getCurrentInstance()
// data
let js = 60 // 每小时分多少格子
let weekCourse = [
  {
    week: 0,
    courses: [
      {
        start: '2024-06-03 13:11:01',
        end: '2024-06-03 16:41:01'
      }
    ]
  },
  {
    week: 1,
    courses: [
      {
        start: '2024-06-04 06:11:01',
        end: '2024-06-03 08:01:01'
      },
      {
        start: '2024-06-04 11:01:01',
        end: '2024-06-03 13:01:01'
      }
    ]
  },
  {
    week: 2,
    courses: []
  },
  {
    week: 3,
    courses: []
  },
  {
    week: 4,
    courses: []
  },
  {
    week: 5,
    courses: []
  },
  {
    week: 6,
    courses: [
      {
        start: '2024-06-08 06:15:01',
        end: '2024-06-08 23:01:01'
      }
    ]
  }
]
const tableContent = ref(``)

// function
const secondsSinceMidnight = (data: any) => {
  const now = new Date(data)
  const seconds = now.getHours() * 60 + now.getMinutes()
  return seconds
}
const setPanelFn = () => {
  let dateData: any = []
  let startDate = Math.floor(Number(secondsSinceMidnight('2024-06-03 07:00:00')) / js) * js
  let endDate = Math.ceil(Number(secondsSinceMidnight('2024-06-03 22:41:01')) / js) * js + (js - 1)
  for (let i = startDate; i <= endDate; i++) {
    dateData.push(i)
  }
  let str = `<table>
      <thead>
        <tr>
          <th>时间</th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
          <th>周六</th>
          <th>周日</th>
        </tr>
      </thead><tbody>`
  for (let i in dateData) {
    let tdStr = ``
    if (dateData[i] % js == 0) {
      tdStr = `<td class="tiem" rowspan="${js}">${dateData[i] / js + ':00:00'}</td>`
    } else {
      tdStr = ''
    }
    for (let k in weekCourse) {
      let str = `<td class="data1"></td>`
      for (let y in weekCourse[k].courses) {
        if (secondsSinceMidnight(weekCourse[k].courses[y].start) == dateData[i]) {
          str = `<td class="data2" rowspan="${
            secondsSinceMidnight(weekCourse[k].courses[y].end) -
            secondsSinceMidnight(weekCourse[k].courses[y].start) -
            1
          }">
            2222
            </td>`
        } else if (
          dateData[i] > secondsSinceMidnight(weekCourse[k].courses[y].start) &&
          dateData[i] < secondsSinceMidnight(weekCourse[k].courses[y].end)
        ) {
          str = ''
        }
      }
      tdStr += str
    }
    str += `<tr>${tdStr}</tr>`
  }
  str += `</tbody></table>`
  tableContent.value = str
}
//onMounted
onMounted(async () => {
  setPanelFn()
})
</script>
 
<style lang="scss" scoped>
.panel {
  :deep(table) {
    border-collapse: collapse;
    width: 99%;
  }
  :deep(th) {
    background: #1993d7;
    border: 1px solid #d1d5d7;
    padding: 8px;
    text-align: center;
  }
  :deep(td) {
    // border: 1px solid red;
    text-align: center;
  }

  :deep(.tiem) {
    width: 110px;
    background: #1993d7;
    border: 1px solid #d1d5d7;
  }
  :deep(tr:nth-child(60n)) {
    td {
      border-bottom: 1px solid #d1d5d7;
    }
  }
  :deep(tr) {
    td {
      width: 200px;
      border-right: 1px solid #d1d5d7;
      height: 1px;
    }
  }
  :deep(.data1) {
  }
  :deep(.data2) {
    background: orange;
  }
}
</style>